<!--
	通用顶部导航
 -->
<template>
	<view	class="top-nav">
		<view
			:style="{
				'background-color': nav.value === value ? bgColorActive : bgColor,
				'color': nav.value === value ? colorActive : color,
			}"
			class="nav"
			:class="nav.value === value ? 'active' : ''"
			v-for="(nav,index) in navs"
			:key="nav.value"
			@click="onclickNav(nav,index)"
		>
			<text class="label">
				{{nav.label}}
			</text>
			<text
				v-if="nav.showAmount"
				class="amount"
			>
				{{nav.amount | countFilter}}
			</text>
		</view>
	</view>
</template>

<script>
export default {
  name: 'top-navs',
  props: {
    value: {
      type: String,
      required: true,
    },
    navs: { // ｛label:  *,value: *｝
      type: Array,
      required: true
    },
    bgColor: { // 背景色
      type: String,
      default: '#FFFFFF'
    },
    bgColorActive: { // 高亮背景色
      type: String,
      default: '#6782f1'
    },
    color: { // 文字颜色
      type: String,
      default: '#767ca1'
    },
    colorActive: { // 高亮文字颜色
      type: String,
      default: '#FFFFFF'
    },
  },
  methods: {
    /**
     * 状态改变
     * @param {Object} nav
     */
    onclickNav(nav, index) {
      if (nav.value === this.value) {
        return
      }
      this.$emit('statusChange', {
        value: nav.value,
        index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-nav {
  display: flex;
  align-items: center;

  .nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    border-radius: $radiusLarge;

    &:not(:first-of-type) {
      margin-left: 5px;
    }

    .label {
      letter-spacing: 1px;
    }

    .amount {
      width: 22px;
      height: 22px;
      margin-left: 5px;
      font-size: $sMini;
      line-height: 22px;
      color: #ffffff;
      text-align: center;
      background-color: $primary2;
      border-radius: 50%;
    }

    &.active {
      .amount {
        color: $primary1;
        background-color: #ffffff;
      }
    }
  }
}

</style>
